<template>
  <navigator url="/minepages/communique">
    <view class="item">
      <view class="header">
        <tn-tag
          width="80rpx"
          height="48rpx"
          shape="radius"
          :backgroundColor="tagBgColor"
          :fontColor="tagFontColor"
        >
          {{ tagText }}
        </tn-tag>
        <text class="time">{{ displayDate }}</text>
      </view>
      <text class="title">{{ displayTitle }}</text>
      <text class="content">{{ displayContent }}</text>
    </view>
  </navigator>
  
</template>

<script>
export default {
  name: "Notification",
  props: {
    notice: {
      type: Object,
      default: null,
    },
  },
  computed: {
    displayTitle() {
      return this.notice?.title || this.notice?.noticeTitle || '系统维护通知';
    },
    displayContent() {
      return this.notice?.content || this.notice?.noticeContent || '为了给您提供更好的服务体验，系统将于 2024 年 1 月 25 日凌晨 2:00-4:00 进行例行维护，期间可能影响部分功能使用。';
    },
    displayDate() {
      return this.notice?.date || this.notice?.createTime || '2024-01-20';
    },
    tagText() {
      return this.notice?.type || this.notice?.noticeType || '重要';
    },
    tagBgColor() {
      const type = this.notice?.type || this.notice?.noticeType || '重要';
      const map = { '重要': '#FEE2E2', '通知': '#E6F0FE', '活动': '#E5FBF4' };
      return map[type] || '#FEE2E2';
    },
    tagFontColor() {
      const type = this.notice?.type || this.notice?.noticeType || '重要';
      const map = { '重要': '#DC2626', '通知': '#2563EB', '活动': '#10B981' };
      return map[type] || '#DC2626';
    }
  }
};
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  padding: 32rpx;
  border-radius: 24rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.05);
}

.header {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.time {
  font-weight: 400;
  font-size: 28rpx;
  line-height: 20px;
  color: #9ca3af;
}

.title {
  font-weight: 500;
  font-size: 32rpx;
  line-height: 24px;
  color: #000;
}

.content {
  font-weight: 400;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #4b5563;
}
</style>